<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.node text {
  font: 14px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

</style>

<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

// set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 20},
  width = 3000 - margin.left - margin.right,
  height = 1000 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var treemap = d3.tree()
  .size([height, width]);

var clusterLayout = d3.cluster()
    .size([height, width])

// parse the file name provided in the url
var GET = {};
var file = window.location.search.substring(1).split("=")[1]

// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom),
  g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// load the external data
d3.json("http://localhost:8008/data/tree.json", function(error, treeData) {
  if (error) throw error;

  //  assigns the data to a hierarchy using parent-child relationships
  var nodes = d3.hierarchy(treeData, function(d) {
    return d.children;
    });

  // maps the node data to the tree layout
  //nodes = clusterLayout(nodes)
  nodes = treemap(nodes);

  // adds the links between the nodes
  var link = g.selectAll(".link")
    .data(nodes.descendants().slice(1))
    .enter().append("path")
    .attr("class", "link")
    .attr("d", function(d) {
       return "M" + d.y/2 + "," + d.x
       + "C" + (d.y/2 + d.parent.y/2) / 2 + "," + d.x
       + " " + (d.y/2 + d.parent.y/2) / 2 + "," + d.parent.x
       + " " + d.parent.y/2 + "," + d.parent.x;});

  // adds each node as a group
  var node = g.selectAll(".node")
    .data(nodes.descendants())
    .enter().append("g")
    .attr("class", function(d) {
      return "node" +
      (d.children ? " node--internal" : " node--leaf"); })
    .attr("transform", function(d) {
      return "translate(" + d.y/2 + "," + d.x + ")"; });

  node.append("path")
    //.style("fill", function(d){if ((d.data.name).startsWith("pore")) {return "red"} else {return "blue"}})
    .style("fill", function(d){return "#" + d.data.color})
    .style("stroke", "black")
    .style("stroke-width", 3)
    .attr("d", d3.symbol()
          .size(250)
          .type(function(d) {if ((d.data.name).startsWith("pore")) {
                              return d3.symbolCircle; }
                            else if ((d.data.name).startsWith("throat")) {
                              return d3.symbolSquare; }}));

  // adds the text to the node
  node.append("text")
    .attr("dy", ".35em")
    .attr("x", 20)
    .text(function(d) { return (d.data.name).split('.')[1] })

});

</script>
</body>
